require(['./config'], () => {
    require(['template', 'url','header','footer','fly'], (template, url, header, footer) => {
        class Index {
            constructor () { 
                this.getData().then(() => {
                    this.render()
                    this.addToCart()
                })
            }
            getData () {
                // 从地址栏拿到id，根据id请求数据
                const id = window.location.search.slice(1).split('&').reduce((obj, item) => {
                    var arr = item.split('=')
                    obj[arr[0]] = arr[1]
                    return obj
                }, {}).id
                // id在别的方法里还会使用，所以写给this，而且转成数字，更严谨
                this.id = Number(id)
                console.log(this.id)
                return new Promise(resolve => {
                    // 接口改为list
                    $.get(`${url.rap2}/api/list`, { id: this.id }, resp => {
                        // console.log(resp)
                        if (resp.code === 200) {
                            const { detail } = resp.body
                            // 由于请求的是rap2接口，所以detail里没有id
                            // 将来换成真实接口以后就不要加id
                            this.detail = { ...detail, id: this.id }
                            // console.log(this.detail,1)
                            resolve()
                        }
                    })
                })
            }
            render () {
                // 模板里面需要this.detail的所有字段，那就展开传
                const html = template('detailTmplate', {...this.detail})
                // console.log(html)
                $('.page-content').html(html)
                
            }
            
            addToCart(){
                $('#addToCartBtn').on('click', e => {
                    this.fly(e)
                    // localStorage.setItem('cart',JSON.stringify(this.detail))
                    let cart = localStorage.getItem('cart')
                    if(cart) {
                        // 有数据
                        // 转成数组
                        console.log(cart)
                        cart = JSON.parse(cart)
                        console.log(cart)
                        const isExist = cart.some(shop => {
                            return shop.id === this.detail.id
                        })
                        if(isExist){
                            cart = cart.map(shop => {
                                if (shop.id === this.detail.id) {
                                    shop.count++
                                }
                                return shop
                            })
                        }else {
                            cart.push({
                                ...this.detail, 
                                count: 1,
                                checked:true
                                // 默认属于选中状态
                            })
                        }
                        localStorage.setItem('cart',JSON.stringify(cart))

                        // 把新的数据push进去
                        // cart.push(this.detail)
                    } else{
                        // 购物车为空
                        localStorage.setItem('cart',JSON.stringify([{
                            ...this.detail, 
                            count:1,
                            checked:true
                        }]))
                    }
                })
            }
            fly(e) {
                $(`<div style="width: 20px;height: 20px;border-radius:50%;background-color:#000;"></div>`).fly({
                    start:{
                      left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                      top: e.clientY,  //开始位置（必填）
                    },
                    end:{
                      left: $('.cart').offset().left - $(window).scrollLeft(), //结束位置（必填）
                      top: $('.cart').offset().top - $(window).scrollTop() //结束位置（必填）
                    },
                    speed: 1.1, //越大越快，默认1.2
                    vertex_Rtop: 100, //运动轨迹最高点top值，默认20
                    onEnd: function () {
                        this.destroy()
                        // 调用header里封装好的方法重新计算数量
                        header.calcCartTotal()
                    }
                })
            }
        }       
        new Index()
    })
})
